<template>
  <div class="settingList">
    <div class="main">
      <div class="main_top">
        <el-button size="small" type="primary" @click="addPrize"
          >新增盲盒奖品</el-button
        >
      </div>
      <ex-table
        ref="table"
        :loading="loading"
        :table-column="tableColumn"
        :table-data="tableData"
        @pageSizeChange="handleSizeChange"
        @currentPageChange="handleCurrentChange"
      > 
        <template v-slot:imgUrl="{ scope }">
           <div>
             <img class="imgBox" :src="scope.row.img" alt="">
           </div>
        </template>
         <template v-slot:type="{ scope }">
           <dict-tag :options="typeList" :value="scope.row.type" />
        </template>
        <template v-slot:level="{ scope }">
          <dict-tag :options="levelTypeList" :value="scope.row.level" />
        </template> 
        <template v-slot:operate="{ scope }">
          <el-button @click="handleEdit(scope.row.id)" size="mini" type="primary" >编辑</el-button>
          <el-button v-if="scope.row.type == 1 || scope.row.type == 3" @click="addNumber(scope.row.id)" size="mini" type="primary" >添加数量</el-button>
        </template>
      </ex-table>
    </div>
    <add-diglog
      ref="childRef"
      v-if="detailDialog"
      :id="id"
      :path="path"
      :visible.sync="detailDialog"
      @success="_handleSuccess"
    />
    <num-diglog
      ref="childRef"
      v-if="numShow"
      :id="id"
      :visible.sync="numShow"
      @success="_handleSuccess"
    />
  </div>
</template>
<script>
// components
import addDiglog from "@/views/blindBox/boxSet/addDiglog";  
import numDiglog from "@/views/blindBox/boxSet/numDiglog"; 
// api
import { adminDict, boxPrizeList } from "@/api/blindBox/boxSet";

// mixins
import handlePageMixin from "@/mixins/handlePageMixin";

export default {
  name: "",
  components: {
    addDiglog,
    numDiglog
  },
  mixins: [handlePageMixin],
  data() {
    
    return {
      loading: false,
      detailDialog: false,
      numShow: false,
      levelTypeList: [],
      typeList:[],//奖品类型字典数组
      tableData: [],
      id: '',
      tableColumn: [
        { label: "奖品图片", slot: true, slotName: "imgUrl", width: '160'},
        { label: "奖品类型", slot: true, slotName: "type", },
        { label: "奖品等级", slot: true, slotName: "level", },
        { prop: "name", label: "奖品名称"},
        { prop: "worth", label: "奖品价值" },
        { prop: "validity", label: "有效期" },
        { prop: "amount", label: "奖品总量"},
        { prop: "used", label: "已发放数量" },
        { prop: "usable", label: "剩余数量" },
        { label: "操作", slot: true, slotName: "operate",width: '180' },
      ],
     
    };
  },
  created() {
    this.getList();
    this.getadminDict()
  },
  mounted() {},
  methods: {
    getadminDict() {
      //获取类型字典
      const params = {
        dictType: "box_prize_level,box_prize_type",
      };
      adminDict(params).then((res) => {
        this.levelTypeList = res.result[0].dictList;
        this.typeList = res.result[1].dictList;
      });
    },
    //列表
    getList() {
      this.loading = true;
      const params = {
        ...this.pageOptions,
      };
      boxPrizeList(params)
        .then((res) => {
          const { total, records } = res.result;
          this.$refs.table.pageOptions.total = total;
          this.tableData = records.map(item => {
            Object.keys(item).forEach(key =>{
              item[key] 
              if(item[key] === ''){
                item[key] = '--'
              }
            }) 
            return item
          });
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //新建子账号
    addPrize() {
      this.detailDialog = true;
      this.path = 'add'
    },
    //添加数量
    addNumber(id){
      this.numShow = true
      this.id = id
    },
    //
    _handleSuccess(data) {
      console.log("data", data);
      this.pageOptions.pageNum = 1
      this.$refs.table.pageOptions.pageNum = 1
      this.getList();
    },
    
    //编辑
    handleEdit(id){
      this.id = id
      this.detailDialog = true;
      this.path = 'edit'
    },
  },
};
</script>
<style lang="scss" scoped>
.top{
    display: flex;
    padding: 10px;
    background: #fff;
    border-radius: 4px;
    .pad{
        padding-right: 24px;
    }
    .time{
      
        .label{
            font-size: 14px;
            color: #606266;
        }
    }
}
.main{
    margin-top: 10px;
    padding: 10px;
    background: #fff;
    .main_top{
        padding: 10px 0;
    }
}
.imgBox{
  width: 110px;
}
</style>